<template>
  <div>
    <div id="rader-chart" class="rader-chart"></div>
  </div>
</template>

<script>
import dataApi from "@/api/data";
export default {
  props: {
    city: String,
    parent_items:Array
  },
  data() {
    return {
      items: [],
      child_city: "北京",
      chart: null,
      years: ["2013", "2014", "2015", "2016", "2017", "2018"],
      item: '森林覆盖率',
      items1:['林地面积','森林面积','人工林面积','天然林面积'],
      items2:['活立木总蓄积','森林蓄积','人工林蓄积','天然林蓄积'],
      year: "2013",
      animationTimer:null
    };
  },
  watch: {
    city(val){
      this.child_city=val
      this.chart.setOption(this.setChart(this));
    },
    parent_items(val){
      this.items = val
      this.initChart()
    }
  },
  methods: {
    setAnimation(){
      let that = this
      this.animationTimer = setInterval(()=>{
        let currentYear = parseInt(that.year)
        that.chart.setOption(that.setChart(that))
        currentYear+=1
        if(currentYear > 2018){
          currentYear = 2013
        }
        that.year = String(currentYear)
        that.item = that.item === '森林覆盖率'? "乔木林单位面积蓄积量":'森林覆盖率'
        //console.log(that.item);
      },3000)
    },
    initChart() {
      this.chart = this.$echarts.init(document.getElementById("rader-chart"));
      this.chart.setOption(this.setChart(this));
      window.addEventListener("resize",()=>{
          this.resizeChart()
      })
      this.setAnimation()
    },
    prepareData() {
      dataApi.getData().then((res) => {
        this.items = res.data.items;
        this.initChart();
      });
    },
    getMax(dataList) {
      let max = Number.MIN_VALUE;
      for (let i = 0; i < dataList.length; i++) {
        if (max < dataList[i]) {
          max = dataList[i];
        }
      }
     //console.log(max);
      return max * 1.2;
    },
    getDataList(data, item, city, year) {
      let res = [];
      if (year === '') {
        for (let i = 0; i < data.length; i++) {
          if (data[i]["city"] === city) {
            res.push(Number(data[i][item]));
          }
        }
        return res;
      } else {
        for (let i = 0; i < data.length; i++) {
          if (data[i]["city"] === city && data[i]["年份"] === year) {
            res.push(Number(data[i][item]));
          }
        }
        return res;
      }
    },
    getSeriesData(data,items,city,year){
      let res=[];
      for (let i = 0; i < data.length; i++) {
        if(data[i]['年份'] === year && data[i]["city"] === city){
          for (let j = 0; j < items.length; j++) {
            res.push(Number(data[i][items[j]]))
          }
        }
      }
      //console.log(res);
      return res;
    },
    getIndicator(data,item) {
      let res = [];
     let dataList = this.getDataList(data,item, this.child_city,'')
      for (var i = 0; i < this.years.length; i++) {
        res.push({
          text: this.years[i] + "年",
          max: this.getMax(dataList),
        });
      }
      return res;
    },
    setChart(that) {
      let option = {
        backgroundColor: "#282a36",
        title: [
          {
            text: that.child_city + '  ' + that.year + '年' + '  林地面积统计',
            left:'5%',
            top: '0',
            textStyle:{
              color:"rgb(238, 197, 102)"
            }
          },
          {
            text:  that.child_city + '  ' + that.year + '年' + ' 林地蓄积量统计',
            left:'35%',
            top: '0',
            textStyle:{
              color:"rgb(238, 197, 102)"
            }
          },
          {
            text: that.child_city + '  ' + that.item + '统计',
            left:'68%',
            top: '0',
            textStyle:{
              color:"rgb(238, 197, 102)"
            }
          },
        ],
        tooltip:{
          tigger: 'axis'
        },
        radar: [
          // radarMap 0
          {
            indicator: [
              {
                text: "林地面积",
                max: that.getMax(
                  that.getDataList(that.items, "林地面积", that.child_city, '')),
              },
              {
                text: "森林面积",
                max: that.getMax(
                  that.getDataList(that.items, "森林面积", that.child_city, '')),
              },
              {
                text: "人工林面积",
                max: that.getMax(that.getDataList(that.items,"人工林面积",that.child_city,'')),
              },
              {
                text: "天然林面积",
                max: that.getMax(that.getDataList(that.items, "天然林面积", that.child_city, '')),
              },
            ],
            center: ["15%", "50%"],
            radius: 80,
            splitNumber: 5,
            name: {
                textStyle: {
                    color: 'rgb(238, 197, 102)'
                }
            },
            splitLine: {
                lineStyle: {
                    color: [
                        'rgba(238, 197, 102, 0.1)', 'rgba(238, 197, 102, 0.2)',
                        'rgba(238, 197, 102, 0.4)', 'rgba(238, 197, 102, 0.6)',
                        'rgba(238, 197, 102, 0.8)', 'rgba(238, 197, 102, 1)'
                    ].reverse()
                }
            },
            splitArea: {
                show: false
            },
          },
          //radarMap 1
          {
            indicator: [
              {
                text: "活立木总蓄积",
                max: that.getMax(that.getDataList(that.items,"活立木总蓄积",that.child_city,'')
                ),
              },
              {
                text: "森林蓄积",
                max: that.getMax(that.getDataList(that.items,"森林蓄积",that.child_city,'')
                ),
              },
              {
                text: "人工林蓄积",
                max: that.getMax(that.getDataList(that.items,"人工林蓄积",that.child_city,'')
                ),
              },
              {
                text: "天然林蓄积",
                max: that.getMax(that.getDataList(that.items,"天然林蓄积",that.child_city,'')
                ),
              },
            ],
            radius: 80,
            center: ["45%", "50%"],
            splitNumber: 5,
            name: {
                textStyle: {
                    color: 'rgb(238, 197, 102)'
                }
            },
            splitLine: {
                lineStyle: {
                    color: [
                        'rgba(238, 197, 102, 0.1)', 'rgba(238, 197, 102, 0.2)',
                        'rgba(238, 197, 102, 0.4)', 'rgba(238, 197, 102, 0.6)',
                        'rgba(238, 197, 102, 0.8)', 'rgba(238, 197, 102, 1)'
                    ].reverse()
                }
            },
            splitArea: {
                show: false
            },
          },
          //radarMap 2
          {
            indicator: that.getIndicator(that.items,that.item),
            center: ["75%", "50%"],
            radius: 80,
            name: {
                textStyle: {
                    color: 'rgb(238, 197, 102)'
                }
            },
            splitLine: {
                lineStyle: {
                    color: [
                        'rgba(238, 197, 102, 0.1)', 'rgba(238, 197, 102, 0.2)',
                        'rgba(238, 197, 102, 0.4)', 'rgba(238, 197, 102, 0.6)',
                        'rgba(238, 197, 102, 0.8)', 'rgba(238, 197, 102, 1)'
                    ].reverse()
                }
            },
            splitArea: {
                show: false
            },
          },
        ],
        series: [
          {
            type: "radar",
           
            emphasis: {
              lineStyle: {
                width: 3,
              },
            },
            areaStyle: {
              color:"#ffb900"
            },
            data: [
              {
                value: that.getSeriesData(that.items,that.items1, that.child_city,that.year),
                name: that.child_city,
                symbol: "rect",
                symbolSize: 5,
                 //在拐点处显示数值
                label: {
                    normal: {
                        show: true,
                        color:"#fff",
                        formatter: (params) => {
                            return params.value
                        },
                    },
                },
              },

            ],
          },
           {
            type: "radar",
           radarIndex: 1,
           areaStyle: {
              color:"#2ec1dd"
            },
            emphasis: {
              lineStyle: {
                width: 3,
              },
            },
            data: [
              {
                value: that.getSeriesData(that.items,that.items2, that.child_city,that.year),
                name: that.child_city,
                symbol: "rect",
                symbolSize: 5,
                 //在拐点处显示数值
                label: {
                    normal: {
                        show: true,
                        color:"#fff",
                        formatter: (params) => {
                            return params.value
                        },
                    },
                },
              },

            ],
          },
          {
            type: "radar",
            radarIndex: 2,
            areaStyle: {
              color:"#84d945"
            },
            data: [
              {
                name: that.child_city + '  ' + that.item,
                value: that.getDataList(that.items,that.item, that.child_city,''),
                //在拐点处显示数值
                label: {
                    normal: {
                      color:"#fff",
                        show: true,
                        formatter: (params) => {
                            return params.value
                        },
                    },
                },
              },
            ],
          },
        ],
      };
      return option;
    },
    resizeChart(){
        this.chart.resize()
    }
  },
  mounted() {
    //this.prepareData();
  },
  beforeDestroy(){
    clearInterval(this.animationTimer)
  }
};
</script>

<style>
.rader-chart {
  width: 100%;
  height: calc(40vh);
}
</style>

